<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义滚动条</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="scrollBar.js"></script>
</head>
<body>
<!-- 容器 -->
<div class="scroll-box">
    <!-- 标签切换区 -->
    <ul class="scroll-tab clearfix">
        <li class="tab-item tab-active">第一篇</li>
        <li class="tab-item">第二篇</li>
        <li class="tab-item">第三篇</li>
        <li class="tab-item">第四篇</li>
    </ul>
    <!-- 滚动内容区 -->
    <div class="scroll-wrap">
        <!-- 滚动内容 -->
        <div class="scroll-cont">
            <div class="scroll-ol">
                <h3 class="anchor">春天来了</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi magni cumque sunt. Dolor fuga
                    numquam nihil doloremque. Quas doloremque eum, accusantium </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
            </div>
            <div class="scroll-ol">
                <h3 class="anchor">夏天来了</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi magni cumque sunt. Dolor fuga
                    numquam nihil doloremque. Quas doloremque eum, accusantium </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
            </div>
            <div class="scroll-ol">
                <h3 class="anchor">秋天来了</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi magni cumque sunt. Dolor fuga
                    numquam nihil doloremque. Quas doloremque eum, accusantium </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae corporis voluptatem veniam
                    officiis at delectus, laudantium reiciendis, consequuntur labore reprehenderit ullam nihil
                    blanditiis veritatis assumenda tempora. Esse nobis officiis, unde?</p>
            </div>
            <div class="scroll-ol">
                <h3 class="anchor">冬天来了</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi magni cumque sunt. Dolor fuga
                    numquam nihil doloremque. Quas doloremque eum, accusantium </p>
            </div>

        </div>
        <!-- 滚动条 -->
        <div class="scroll-bar">
            <!-- 滚动滑块 -->
            <div class="scroll-slider"></div>
        </div>
    </div>
</div>
<script type="text/javascript">
    var newBar=new CusScrollBar({
        contentSelector: '.scroll-cont', //滚动内容区选择器
        barSelector: '.scroll-bar', //滚动条选择器
        sliderSelector: '.scroll-slider' //滚动滑块选择器
    });
</script>
</body>
</html>